<template>
  <div class="user-manage">
    <div class="query-form">
      <div id="yearMonthChart" :style="{width: '100%', height: '85vh'}"></div>

<!--      <div id="yearChart" :style="{width: '100%', height: '300px'}"></div>-->
    </div>
  </div>
</template>
<script>
export default {
  name: 'salary-statistics',
  data () {
    return {
      time: [],
      yearMonthTotalAmount: [],
      year: [],
      yearTotalAmount: [],
    }
  },
  mounted(){
    this.getSalaryStatisticsByYearAndMonth();
    this.getSalaryStatisticsByYear();
  },
  methods: {
    async getSalaryStatisticsByYearAndMonth() {
      let list= await this.$api.getSalaryStatisticsByYearAndMonth();
      for (let i = 0; i < list.length; i++) {
        this.time.push(list[i].time)
        this.yearMonthTotalAmount.push(list[i].totalAmount)
      }
      this.yearMonthDrawLine();

    },
    async getSalaryStatisticsByYear() {
      let list= await this.$api.getSalaryStatisticsByYear();
      for (let i = 0; i < list.length; i++) {
        this.year.push(list[i].year + "年")
        this.yearTotalAmount.push(list[i].totalAmount)
      }
      this.yearDrawLine();
    },
    async yearMonthDrawLine(){
      // 基于准备好的dom，初始化echarts实例
      let yearMonthChart = this.$echarts.init(document.getElementById('yearMonthChart'))
      // 绘制图表
      yearMonthChart.setOption({
        title: { text: '按月统计每月发出工资总数' },
        tooltip: {},
        xAxis: {
          data: this.time
        },
        yAxis: {},
        series: [{
          name: '金额',
          type: 'bar',
          data: this.yearMonthTotalAmount
        }]
      });
    },
    async yearDrawLine(){
      let yearChart = this.$echarts.init(document.getElementById('yearChart'))
      // 绘制图表
      yearChart.setOption({
        title: { text: '按照年统计发出工资总数' },
        tooltip: {},
        xAxis: {
          data: this.year
        },
        yAxis: {},
        series: [{
          name: '金额',
          type: 'bar',
          data: this.yearTotalAmount
        }]
      });
    }
  }
}
</script>

<style lang="scss">
</style>